<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style type="text/css">
    .droptarget {
        float: left; 
        width: 100px; 
        height: 95px;
        margin: 15px;
        border: 1px solid #aaaaaa;
    }
    .droptarget2 {
        float: left; 
        width: 100px; 
        height: 95px;
        margin: 15px;
        border: 1px solid #aaaaaa;
    }
    .box1{
        width: 200px;height: 200px;background-color: red;
    }
    .parent1,.parent2{
        padding: 30px;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin-bottom: 30px;
    }
    .child1{
        width: 100%;
        height: 100%;
        background-color: yellow;
    }
    .child2{
        width: 100%;
        height: 100%;
        background-color: red;
    }
    </style>

<body>
    
    <div class="parent1" istaget="true">
        <div draggable="true" class="child1"></div>
    </div>

    <div class="parent2" istaget="true">
        <div draggable="true" class="child2"></div>
    </div>

    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script>

        function clickme(event){
            console.log("event.target = "+event.target)
            var b =document.getElementById("droptarget1").innerHTML;
            $("#droptarget2").append(b)
            //console.log($("#droptarget2")[0])
            console.log(document.getElementById("droptarget2"))
        }


    var draged,dragendparent,target

    /* 拖动时触发*/
    //document.addEventListener()为整个页面添加监听事件
    document.addEventListener("dragstart", function(event) {
        //dataTransfer.setData()方法设置数据类型和拖动的数据
        event.dataTransfer.setData("Text", event.target.id);
        console.log("dragstart中+event.target如下")
        console.log(event.target)
        draged = event.target
        //被拖动的父元素dragendparent，他是jquery对象
        dragendparent = ($(event.target).parent())
        console.log("被拖动元素的父元素为：")
        console.log(dragendparent)
    });



    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    });


    document.addEventListener("drop", function(event) {
        //这里的event是目标框div
        event.preventDefault();
        //将被拖动的行元素添加到目标框div中
        $(event.target).append(draged);

        //$(dragendparent).append($(event.target).children[0])
        console.log("在drop当中$(event.target).children[0]如下")
        console.log()
        let firstChild = $(event.target).children()[0]
        dragendparent.append(firstChild)
        
    });
    </script>

</body>
</html>